<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <meta http-equiv="Pragma" content="No-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <title>添加新页面</title>
    <script>
        //最后把代码封装起来,封装起来以后，要给这个函数加上一个参数url.参数是为了替换要读取的文件名
        function ajax(url, method, data, fnSucc, fnField) {
            let oAjax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象;
            oAjax.open(method, url, true);//把要读取的参数的传过来。
            oAjax.send(JSON.stringify(data));
            oAjax.onreadystatechange = function () {
                if (oAjax.readyState === 4) {
                    if (oAjax.status === 200) {
                        fnSucc(oAjax.responseText);//成功的时候调用这个方法
                    } else {
                        if (fnfiled) {
                            fnField(oAjax.status);
                        }
                    }
                }
            };
        }

        function add() {
            let data = {};
            data.fileName = document.getElementById('fileName').value;
            data.fileContent = document.getElementById('fileContent').value.trim();
            if(data.fileName === ''){
                alert('文件名称不能为空！');
                return;
            }
            if(data.fileContent === ''){
                alert('文件内容不能为空！');
                return;
            }
            let arr = data.fileName.split('.');
            if(arr[0].length < 1){
                alert('文件名称格式为[名称].[html]！');
                return;
            }
            debugger;
            if(arr[1] !== 'html'){
                alert('文件名称必须以.html结尾！');
                return;
            }

            ajax('/add', 'post', data, function (text) {
                alert(text);
            }, function (errStatus) {
                alert(errStatus);
            });
        }
    </script>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div>
    <button onclick="add()">提交</button>
    <button onclick="window.location.href='/'">返回首页</button>
</div>
<form method="post" action="/add">
    <div>
        <label for="fileName" style="display: block">文件名称</label>
        <input type="text" id="fileName" name="fileName"/>
    </div>
    <div>
        <label for="fileContent" style="display: block">文件内容</label>
        <textarea id="fileContent" name="fileContent" style="width: 90%;height: 400px;">

    </textarea>
    </div>
</form>
</body>
</html>